<template>
	<view class="box">
		<uNavbar title="绑定银行卡" bgColor="transparent"></uNavbar>
		<view class="info">
			<view class="info_item">
				<text>姓名</text>
				<input type="text" v-model.trim="name" placeholder="请输入真实姓名" />
			</view>
			<view class="info_item">
				<text>身份证</text>
				<input type="text" v-model.trim="idCard" placeholder="请输入身份证" />
			</view>
			
			<view class="info_item">
				<text>银行卡号</text>
				<input type="number"  v-model.trim="banknum"  placeholder="请输入本人实名银行卡号" />
			</view>
			<view class="info_item">
				<text>预留手机号</text>
				<input type="number"  v-model.trim="phone"  placeholder="请输入银行预留手机号" />
			</view>
		</view>
		<view class="cardList flex_Z" @click="goNixtPage">
			<text>银行卡支持列表</text>
			<view class="cardList_box flex_ld">
				<image class="card_l" src="../../static/image/ycard.png" mode=""></image>
				<text class="c4 more">•••</text>
				<image class="card_r " src="../../static/icon/i_y.png" mode=""></image>
			</view>
		</view>
				<view class="information entry" >
					<view class="zhengce flex_c" @click="toggleAgree">
						<image src="../../static/icon/i_checkbox.png" mode="" v-if="selectStatus"></image>
						<image src="../../static/icon/i_checkbox1.png" mode="" v-if="!selectStatus"></image>
					</view>
					<view class="information_box flex_dq">
						<text>阅读并且同意</text>
						<text class="underline" @click.stop="showAgreements">《新生支付服务协议》</text>
					</view>
				</view>
		<view class="btn" @click="addBank">
			确定
		</view>
		<u-popup :show="showpass" mode="center" @close="showpass=false" closeable bgColor="transparent">
			<view class="pass_wrap">
				<view class="tit">
					请输入手机验证码
				</view>
				<u-code-input disabledDot :adjustPosition="false" borderColor="#A68A64" focus class="code_input"
					v-model="password" mode="line" dot></u-code-input>
				<view class="other_btnwrap">
					<view class="other_btn1" @click="showpass=false,password=''">
						取消
					</view>
					<view class="other_btn2" @click="submittopup">
						确认
					</view>
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import {sendSms} from "../../api/login.js";
	import {addAccount,addAccountConfirm} from "../../api/wallet.js";
	import {myAccount} from "../../api/wallet.js"
	export default {
		data() {
			return {
				name: "",
				idCard: "",
				banknum: "",
				tips: '',
				phone: "",
				type:'',
				cardId:'',
				selectStatus:false,
				showpass:false,
				password:"",
			}
		},
		onLoad() {
			this.type = uni.getStorageSync('bankType')
			this.isMyAccount()
		},
		methods: {
			// 用户信息
			isMyAccount() {
				myAccount().then(res => {
					console.log(res)
					if (res.code == 1) {
						this.name = res.data.member_real.real_name
						this.idCard = res.data.member_real.id_num
					}
				})
			},
			toggleAgree(){
				this.selectStatus=!this.selectStatus
				console.log(this.selectStatus)
			},
			showAgreements(){
				uni.navigateTo({
					url:"/pagesMy/mywallet/xinshengrule"
				})
			},
			addBank(){
				if(!this.selectStatus){
					uni.$u.toast('请勾选协议');
					return;
				}
				if(uni.$u.test.isEmpty(this.banknum)){
					uni.$u.toast('请输入银行卡');
					return;
				}
				if(!uni.$u.test.mobile(this.phone)){
					uni.$u.toast('手机号错误');
					return;
				}
				this.showpass = true
				addAccount({
					wallet_type:this.type,
					account:this.banknum,
					phone:this.phone,
				}).then(res=>{
					if(res.code==1){
						uni.$u.toast('短信验证码发送成功');
						this.cardId = res.data.card_id
						this.showpass = true
					}else{
						this.showpass = false
					}
				})
			},
			
			submittopup(){
				if(this.password.length<6){
					uni.$u.toast("请输入完整")
				}else {
					addAccountConfirm({
						card_id:this.cardId,
						sms_code:this.password
					}).then(res=>{
						if(res.code==1){
							uni.$u.toast(res.msg);
							this.showpass=false
							this.password=""
							setTimeout(()=>{
								uni.navigateBack()
							},1500)
						}
						console.log(res)
					})
				}

			},

			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				console.log(11111);
				let that = this;
				let data = {
					phone: that.phone,
					scene: 'bank_phone',
				}
				sendSms(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						that.validateCode=res.data
						uni.$u.toast(res.msg);
						if (that.$refs.uCode.canGetCode) {
							that.$refs.uCode.start();
						}
					}
				})
			},
			goNixtPage(){
				uni.navigateTo({
					url:'/pagesMy/mywallet/cardSupportList'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		height: 100vh;
		background-color: #E0DDDA;
	}

	.info {
		width: 750rpx;
		// height: 400rpx;

		.info_item {
			width: 630rpx;
			height: 80rpx;
			margin: 0 auto;
			margin-top: 50rpx;
			border-bottom: 2rpx solid #CFC4B7;
			display: flex;

			>text {
				width: 260rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #333;
			}

			>input {
				width: 500rpx;
				font-weight: 300;
				font-size: 32rpx;
				color: #A6A5AF;
				margin-left: 56rpx;
			}
		}
	}

	.tit {
		width: 630rpx;
		margin: 0 auto;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.ipt {
		width: 630rpx;
		margin: 0 auto;
		border-bottom: 2rpx solid rgba(255, 255, 255, 0.15);
		height: 80rpx;
		margin-top: 40rpx;
	}

	.binding {
		width: 630rpx;
		margin: 0 auto;
		border-bottom: 2rpx solid rgba(255, 255, 255, 0.15);
	}

	.btn {
		width: 690rpx;
		height: 88rpx;
		background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 332rpx 332rpx 332rpx 332rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		margin: 0 auto;
		margin-top: 80rpx;
	}
	.cardList{
		width: 550rpx;
		height: 168rpx;
		background: #F2f2f2;
		border-radius: 12rpx;
		margin: 60rpx auto;
	}
	.cardList>text{
		margin: 22rpx 0 0 26rpx;
		color:#333 ;
	}
	.cardList_box{
		position: relative;
		margin-top: 32rpx;
	}
	.more{
		position: absolute;
		top: 0;
		right: 70rpx;
	}
	.card_l{
		width: 460rpx;
		height: 30rpx;
		margin-left: 26rpx;
	}
	.card_r{
		width: 36rpx;
		height: 36rpx;
		margin-right: 20rpx;
	}

	/deep/.u-button--success {
		background: none !important;
		border: none !important;
		color: #FF2CDF !important;
	}

	/deep/.u-border {
		border: none;

	}

	/deep/.uni-input-wrapper {
		color: #A6A5AF !important;
	}

	/deep/.uni-input-placeholder {
		color: #A6A5AF !important;
	}
	/deep/.uni-input-input{
			color: #333;
			font-weight: 300;
			font-size: 30rpx;
	}
	.information {
		width: 80%;
		margin: 40rpx auto 0;
		display: flex;
		align-items: center;
		visibility: inherit;
	}
	
	.information_box {
		display: flex;
		align-items: flex-start;
		margin-left: 10rpx;
	}
	
	.information_box>text {
		color: #A6A5AF;
		font-size: 24rpx;
	}
	
	.information_box>text:nth-child(2n) {
		color: #A68A64 !important;
	}
	.zhengce>image {
		width: 32rpx;
		height: 32rpx;
	}
	.pass_wrap {
		width: 602rpx;
		height: 406rpx;
		background: #E0DDDA;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		z-index: 998;
	
		.tit {
			width: 602rpx;
			text-align: center;
			font-size: 36rpx;
			color: #333;
			padding-top: 50rpx;
			margin-bottom: 70rpx;
		}
	
		.code_input {
			margin: 0 auto;
		}
	
		.other_btnwrap {
			width: 522rpx;
			height: 72rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			margin-top: 50rpx;
	
			.other_btn1 {
				width: 220rpx;
				height: 72rpx;
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				border: 2rpx solid #A68A64;
				font-size: 28rpx;
				color: #A68A64;
				text-align: center;
				line-height: 72rpx;
			}
	
			.other_btn2 {
				width: 220rpx;
				height: 72rpx;
				background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 72rpx;
			}
		}
	
		.u-code-input {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	
		/deep/.u-code-input__item{
			width: 30px !important;
			height: 30px !important;
			margin-right: 14px !important;
		}
		/deep/.u-code-input__item>text {
			color: #fff !important;
		}
	}
</style>